<template>
<div>
  <slot name="default" :data="{day,hour,minute,second,isStart}">
    {{day}}:{{hour}}:{{minute}}:{{second}}
  </slot>
</div>
</template>

<script>
export default {
  props: {
    date: {
      default: () => {
        return new Date()
      }
    }
  },
  data () {
    return {
      isStart: false,
      hour: '00',
      minute: '00',
      second: '00',
      day: '00',
      count: this.date - new Date().getTime(),
      interval: null
    }
  },
  mounted () {
    if (this.isStart) {
      this.start()
    }
  },
  methods: {
    start () {
      this.interval = setInterval(() => {
        this.count = this.count - 1000
        if (this.count <= 0) {
          this.second = '00'
          clearInterval(this.interval)
          this.timeDown()
          return
        }
        this.day = Math.floor(this.count / (24 * 3600 * 1000))
        if (this.day < 10) {
          this.day = '0' + this.day
        }
        // 剩余的秒数
        let leave1 = this.count % (24 * 3600 * 1000)
        this.hour = parseInt(leave1 / (60 * 60 * 1000)) + ''
        if (this.hour < 10) {
          this.hour = '0' + this.hour
        }
        let n = leave1 % (60 * 60 * 1000)
        this.minute = parseInt(n / (60 * 1000)) + ''
        if (this.minute < 10) {
          this.minute = '0' + this.minute
        }
        let n2 = n % (60 * 1000)
        this.second = parseInt(n2 / 1000) + ''
        if (this.second < 10) {
          this.second = '0' + this.second
        }
      }, 1000)
    },
    timeDown () {
      this.$emit('timeDown')
    }
  },
  computed: {}
}
</script>
